<template>
	<div class="acount">
		<div style="display: flex;align-items: center;justify-content: flex-end;height: 60px;">
			<div class="">
				<span>账户糖果余额：</span>
				<span style="font-size: 30px;color: red;font-weight: bold;">{{count}}</span>
			</div>
			<div style="margin-left: 30px;">
				<span>账户状态：</span>
				<span :style="{ color:status==0?'green':'red' , fontSize:'24px',fontweight:'blod' }">{{status==0?'正常':'冻结'}}</span>
			</div>
		</div>
		<el-table :data="candyTableData" style="width: 100%" border stripe>
		  <el-table-column prop="newSweet" label="最新糖果数" align="center">
		  </el-table-column>
		  <el-table-column prop="lastSweet" label="变更前糖果数" align="center">
		  </el-table-column>
		  <el-table-column prop="changeSweet" label="糖果变化数量" align="center">
		    <template slot-scope="scope">
		      <span :style="{color:scope.row.type==1?'red':'#04c504'}">{{scope.row.changeSweet}}</span>
		    </template>
		  </el-table-column>
		  <el-table-column prop="dataRemarks" label="糖果来源" align="center">
		  </el-table-column>
		  <el-table-column prop="type" label="糖果标识" align="center">
		    <template slot-scope="scope">
		      <i :class="scope.row.type==1?'el-icon-top':'el-icon-bottom'" :style="{color:scope.row.type==1?'red':'#04c504'}"></i>
		    </template>
		  </el-table-column>
		  <el-table-column prop="createDate" label="变更时间" sortable align="center">
		  </el-table-column>
		</el-table>
		<div class="page">
		  <el-pagination :page-size="size" :current-page="page" layout="prev, pager, next,total,jumper"
		    :total="total" background @current-change="currentChange">
		  </el-pagination>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				page:1,
				size:10,
				total:0,
				mid:localStorage.getItem('merchantId'),
				candyTableData:[],
				count:0,
				status:''
			}
		},
		mounted(){
			this.getSweet();
			this.getSweetDel();
		},
		methods:{
			getSweet(){
				this.$http.get(this.$api.sweet+'/'+this.mid).then(res=>{
					this.count = res.data.sweetBalance;
					this.status = res.data.status;
				})
			},
			getSweetDel(){
				this.$http.get(this.$api.sweetQuery,{
					page:this.page,
					size:this.size,
					mid:this.mid
				}).then(res=>{
					this.candyTableData = res.data;
					this.total = res.extraInfo;
				})
			},
			currentChange(val){
				this.page = val;
				this.getSweet();
				this.getSweetDel();
			}
		}
	}
</script>

<style scoped>
	.acount{
		padding:15px;
	}
	.page {
	  margin-top: 30px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
</style>
